<template>
  <van-tabbar
    v-model="active"
    :placeholder="true"
    :route="true"
    fixed
  >
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :icon="item.icon"
      :to="item.to"
    >
      {{ item.title }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';

const active = ref(0);
const tabbarData = reactive([
  {
    icon: 'wap-home-o',
    title: '主页',
    to: {
      name: 'Demo',
    },
  },
  {
    icon: 'gem-o',
    title: '工具',
    to: {
      name: 'Tools',
    },
  },
  {
    icon: 'user-o',
    title: '关于',
    to: {
      name: 'About',
    },
  },
]);
</script>
